<template>
    <div class="py20 px25 mb10 bgc11">
    <div class="flx-lm mb8">
        <img :src="review.avatar" class="w18 h18 br9 mr5" alt="">
        <span class="clr1 fz12">{{review.username}}</span>
      </div>
      <div class="mb8">
        <p class="fz15 fwb clr5">{{review.title}}</p>
      </div>
      <div class="flx-bm h18vw over-h mb8" v-show="!isShowReview">
        <div v-for="(i,n) in review.html_images" :class="(n+1)===review.html_images.length?'':'mr10'" class="review-img flx-g-1 flx-b-0p h100p">
          <img :src="i.raw_src" class="w100p h100p" alt="">
        </div>
      </div>
      <div class="pos-r">
        <p class="fz15 lh22 clr5" v-show="!isShowReview">{{review.description}}...</p>
        <div class="review-txt w100p" v-show="isShowReview" v-html="review.html_text"></div>
        <span class="pos-a r0 b0 clr1" @click="onClick">{{isShowReview === true ? '（收起）' : '（全文）'}}</span>
      </div>
    </div>
</template>

<script>
    export default {
      props: {
        review: {
          type: Object,
          default(){
            return {}
          }
        },
      },
      data() {
        return {
          isShowReview: false
        }
      },
      methods: {
        onClick(){
          this.isShowReview = !this.isShowReview
        }
      }
    }
</script>

<style lang="stylus" scoped>
.review-txt >>> img
  width 100%
</style>
